<template>
  <div class="search-box">
      <!--悬浮搜索框-->
      <div class="nav box">
          <div class="logoBig">
              <img src="~images/logo.png">
          </div>
          <div class="search-bar">
              <el-input v-model="searchContent" placeholder="搜索">
                  <template #append><el-button>搜索</el-button></template>
              </el-input>
          </div>
      </div>
  </div>
</template>
<script lang="ts" setup>
import {ref} from "vue";
const searchContent = ref('')
</script>
<style scoped lang="scss">
.search-box{
    margin-bottom: 20px;
  .nav{
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    .logoBig{
      height: 90px;
      width: 200px;
      img{
        width: 100%;
      }
    }
    .search-bar{
      flex: 1;
      padding-top: 40px;
      .el-input{
        height: 46px;
      }
      ::v-deep(.el-input-group__append){
        background: #e1251b;
        color: #ffffff;
        width: 100px;
        box-shadow: 0 0;
      }
      ::v-deep(.el-input__wrapper){
        border: 2px solid #e1251b;
      }
      ::v-deep(.el-input__wrapper.is-focus){
        box-shadow: 0 0;
      }
    }
  }
}
</style>